<template>
  <div class="my page" v-if="userInfo">
    <div class="wrapper" ref="webview">
      <div class="top-hd">
        <div class="avatar-url">
          <img :src="userInfo.userPhoto?userInfo.userPhoto:'/static/images/avatar.png'" />
        </div>
        <div class="user-info">
          <div class="account" v-if="isLogin">{{userInfo.nickname | phoneFilter}}</div>
          <van-button class="exit" v-else @click="$store.dispatch('setLogin', true);">登录/注册</van-button>
        </div>
        <div class="icon-setup" @click="goRouter('setup')"></div>
      </div>
      <div class="order-state">
        <div class="rows" @click="goRouter('order/list', 0)">
          <span class="icon icon-1"></span>
          <span class="name">全部</span>
          <!-- <span class="badge">10</span> -->
        </div>
        <div class="rows" @click="goRouter('order/list', 1)">
          <span class="icon icon-2"></span>
          <span class="name">待付款</span>
        </div>
        <div class="rows" @click="goRouter('order/list', 2)">
          <span class="icon icon-3"></span>
          <span class="name">待收货</span>
        </div>
        <div class="rows" @click="goRouter('comments/list')">
          <span class="icon icon-4"></span>
          <span class="name">待评价</span>
        </div>
        <div class="rows" @click="goRouter('order/list', 3)">
          <span class="icon icon-5"></span>
          <span class="name">已完成</span>
        </div>
      </div>
      <div class="cell-group">
        <div class="cell" @click="goRouter('coupons/list')">
          <div class="title">
            <span class="icon icon-coupons"></span>
            <span class="name">我的优惠券</span>
          </div>
          <div class="value isArrow">
          </div>
        </div>
        <div class="cell van-hairline-j--top" @click="goRouter('address/list')">
          <div class="title">
            <span class="icon icon-adderss"></span>
            <span class="name">地址管理</span>
          </div>
          <div class="value isArrow">
            <!-- <span class="text">未填写</span> -->
          </div>
        </div>
        <div class="cell van-hairline-j--top" @click="goRouter('collection')">
          <div class="title">
            <span class="icon icon-collection"></span>
            <span class="name">我的收藏</span>
          </div>
          <div class="value isArrow">
          </div>
        </div>
        <div class="cell van-hairline-j--top" @click="getShopApplyInfo">
          <div class="title">
            <span class="icon icon-tenants"></span>
            <span class="name">商家入驻</span>
          </div>
          <div class="value isArrow">
            <span class="text">了解详情</span>
          </div>
        </div>
      </div>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'My',
  data() {
    return {
      isActive: 4,
      isPopup: true,
      isSwitch_1: false,
      isSwitch_2: false,
      shopApplies: {},
      isLogin: localStorage.getItem('Token')
    };
  },
  inject: ['reload'],
  computed: {
    ...mapGetters(['userInfo', 'isCert'])
  },
  created() {
    this.isSwitch_1 = !this.userInfo.isNeedRepeat;
    this.isSwitch_2 = !this.userInfo.isNeedRepeat;
    this.$store.dispatch('setUserInfo');
    this.getApplyInfo();
  },
  methods: {
    getApplyInfo() {
      this.$API.store.getShopApplyInfo().then(res => {
        if (res.data) {
          this.shopApplies = res.data.shopApplies || {};
        }
      });
    },
    getShopApplyInfo() {
      if (this.shopApplies.applyStatus === -1) {
        this.$toast('您的申请未通过，请重新提交!');
        this.$router.push({ path: '/shop/apply' });
      } else if (this.shopApplies.applyStatus === 0) {
        this.$router.push({ path: '/prompt', query: { type: 2 } });
      } else if (this.shopApplies.applyStatus === 1) {
        this.$router.push({ path: '/prompt', query: { type: 4 } });
      }
    },
    onChangeFrozenMoney() {
      if (this.userInfo.isFrozen === 2) {
        return;
      }
      this.$dialog
        .confirm({
          title: '温馨提醒',
          message: '是否确认解封容量，解封后钱包容量无法扩容，请谨慎进行此操作',
          confirmButtonText: '取消',
          cancelButtonText: '确定'
        })
        .then(() => {})
        .catch(() => {
          this.$API.global.unfrozen({ id: this.$route.query.id }, 'delete').then(res => {
            if (!res.code) {
              this.$toast('解封成功');
              this.$store.dispatch('setUserInfo');
            } else {
              this.$toast(res.message);
            }
          });
          // on cancel
        });
    },
    needRepeatAmount() {
      if (!this.userInfo.isNeedRepeat) {
        return;
      }
      this.$router.push({ path: '/prompt', query: { type: 5, amount: this.userInfo.needRepeatAmount } });
    },
    goRouter(path, status) {
      var query = {};
      if (path === 'order/list') {
        localStorage.setItem('orderStatus', status);
      }
      this.$router.push({ path: '/' + path, query });
    }
  }
};
</script>
<style lang="less" scoped>
.my {
  display: flex;
  flex-direction: column;
  width: 100%;
  .wrapper {
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
  }
  .top-hd {
    height: 380px;
    box-sizing: border-box;
    width: 108%;
    margin: 0 -4%;
    padding: calc(74px + env(safe-area-inset-top)) calc(45px + 4%) 64px;
    position: relative;
    border-radius: 0 0 20% 20%;
    background: linear-gradient(259deg, rgba(239, 0, 62, 1) 0%, rgba(253, 32, 77, 1) 100%, rgba(255, 39, 83, 1) 100%);
    display: flex;
    .icon-setup {
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      background-image: url('/static/img/icon-setup.png');
    }
    .avatar-url {
      width: 160px;
      height: 160px;
      margin-right: 32px;
      background-color: #eee;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      img {
        width: 180px;
        height: 180px;
        object-fit: contain;
      }
      .edit {
        color: #fff;
        padding: 20px;
        width: 34px;
        height: 34px;
        text-align: center;
        position: absolute;
        left: 50%;
        margin-left: -20px;
        border-radius: 50%;
        // background: #fff;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 34px 34px;
        background-image: url('/static/img/icon-camera.png');
        bottom: 0;
      }
    }
    .user-info {
      flex: 1;
      .account {
        font-size: 50px;
        color: #fff;
        margin-top: 50px;
      }
    }
  }
  .order-state {
    padding: 44px 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 10px 15px 0px rgba(221, 221, 221, 0.3);
    border-radius: 10px;
    margin: -100px 25px 0;
    position: relative;
    z-index: 99;
    display: flex;
    .rows {
      flex: 1;
      position: relative;
      .icon {
        display: block;
        width: 55px;
        height: 55px;
        margin: 0 auto;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 55px 55px;
      }
      .icon-1 {
        background-image: url('/static/img/icon-order-all.png');
      }
      .icon-2 {
        background-image: url('/static/img/icon-order-pay.png');
      }
      .icon-3 {
        background-image: url('/static/img/icon-order-sh.png');
      }
      .icon-4 {
        background-image: url('/static/img/icon-order-pj.png');
      }
      .icon-5 {
        background-image: url('/static/img/icon-order-qx.png');
      }

      .name {
        display: block;
        font-size: 28px;
        text-align: center;
        margin-top: 8px;
      }
      .badge {
        position: absolute;
        top: 10px;
        right: 45px;
        font-size: 20px;
        line-height: 28px;
        padding: 0 10px;
        text-align: center;
        color: #fff;
        background-color: #ee0a24;
        border: 1px solid #fff;
        border-radius: 20px;
        transform: translate(50%, -50%);
        transform-origin: 100%;
      }
    }
  }
}
</style>
